<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        *{padding: 0; margin: 0;}

        .g-container{
            width: 100%;
            height: 100vh;
            background-color: #2b3c4d;
           
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .g-container form{
            background-color: #ffffff;
            width: 400px;
            height: 200px;
            padding: 20px;
        }

        .g-container form div{
            line-height: 50px;
        }
        .g-container form input{
            width: 80%;
            height: 30px;
        }

        .g-container form .m-btn{
            text-align: center;
        }
        .g-container form button{
            width: 200px;
            padding: 5px 0;
        }

    </style>

    <!-- 
        实现项目需求前
           1. 明确需求
               实现登录界面，水平居中
           2. 分析
               form 登录界面
               div 盒子   

           3.具体实现
               外面的div盒子 设置弹性盒子布局
                             display:flex;
               里面的form登录框成为项目元素，
                    如何将项目元素水平垂直居中?
                             justify-content: center;
                             align-items: center;        
                               

    -->
</head>
<body>
    <div class="g-container">
        <form >
            <div>
                <label>用户名:</label>
                <input type="text" name="username">
            </div>
            <div>
                <label>密&nbsp;&nbsp;&nbsp;码:</label>
                <input type="text" name="username">
            </div>
            <div class="m-btn">
               <button>登录</button>
            </div>
        </form>
    </div>
</body>
</html>